<template>
<div class="content" :style='{"minHeight":"100vh","padding":"0 0 500px","alignItems":"flex-start","textAlign":"center","flexWrap":"wrap","background":"#fff","display":"block","justifyContent":"center","height":"auto"}'>
	<div class="text" :style='{"padding":"20px 0 0","margin":"0 auto","color":"#333","textAlign":"center","background":"url() no-repeat center top","width":"100%","fontSize":"32px","fontWeight":"bold"}'>欢迎使用 {{this.$project.projectName}}</div>
    <div class="cardView">
        <div class="cards" :style='{"margin":"50px auto","alignItems":"center","flexWrap":"wrap","background":"none","display":"flex","width":"100%","justifyContent":"center"}'>
			<div :style='{"border":"0px solid #ccc","margin":"0 0px 10px","borderRadius":"0px","background":"linear-gradient(180deg, rgba(255,255,255,.6) 80%, rgba(202,210,231,1) 100%)","display":"flex","width":"80%","justifyContent":"center"}' v-if="isAuth('menzhenshoufei','首页总数')">
				<div :style='{"borderColor":"#c7ebdb","background":"url(http://codegen.caihongy.cn/20230216/4a480d618e3e48c7bd50cafd078d2b9c.png) no-repeat center center / auto 80%","borderWidth":"0px","width":"auto","minWidth":"200px","borderStyle":"solid","height":"120px"}'></div>
				<div :style='{"borderColor":"#c7ebdb","alignItems":"center","flexDirection":"column","background":"none","borderWidth":"0px","display":"flex","width":"auto","minWidth":"50%","borderStyle":"solid","justifyContent":"center"}'>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"20px","color":"#333","fontWeight":"bold","height":"24px"}'>{{menzhenshoufeiCount}}</div>
					<div :style='{"margin":"5px 0","lineHeight":"24px","fontSize":"16px","color":"#666","height":"24px"}'>门诊收费总数</div>
				</div>
			</div>
        </div>
        <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px;">
            <el-card style="width: 20%;margin: 0 10px;" v-if="isAuth('menzhenshoufei','首页统计')">
                <div id="menzhenshoufeiChart1" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 20%;margin: 0 10px;" v-if="isAuth('menzhenshoufei','首页统计')">
                <div id="menzhenshoufeiChart2" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 20%;margin: 0 10px;" v-if="isAuth('menzhenshoufei','首页统计')">
                <div id="menzhenshoufeiChart3" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 20%;margin: 0 10px;" v-if="isAuth('menzhenshoufei','首页统计')">
                <div id="menzhenshoufeiChart4" style="width:100%;height:400px;"></div>
            </el-card>
            <el-card style="width: 20%;margin: 0 10px;" v-if="isAuth('menzhenshoufei','首页统计')">
                <div id="menzhenshoufeiChart5" style="width:100%;height:400px;"></div>
            </el-card>
        </div>
    </div>
</div>
</template>
<script>
//5
import router from '@/router/router-static'
import * as echarts from 'echarts'
export default {
	data() {
		return {
            menzhenshoufeiCount: 0,
		};
	},
  mounted(){
    this.init();
    this.getmenzhenshoufeiCount();
    this.menzhenshoufeiChat1();
    this.menzhenshoufeiChat2();
    this.menzhenshoufeiChat3();
    this.menzhenshoufeiChat4();
    this.menzhenshoufeiChat5();
  },
  methods:{
    init(){
        if(this.$storage.get('Token')){
        this.$http({
            url: `${this.$storage.get('sessionTable')}/session`,
            method: "get"
        }).then(({ data }) => {
            if (data && data.code != 0) {
            router.push({ name: 'login' })
            }
        });
        }else{
            router.push({ name: 'login' })
        }
    },
    getmenzhenshoufeiCount() {
        this.$http({
            url: `menzhenshoufei/count`,
            method: "get"
        }).then(({
            data
        }) => {
            if (data && data.code == 0) {
                this.menzhenshoufeiCount = data.data
            }
        })
    },

    menzhenshoufeiChat1() {
      this.$nextTick(()=>{

        var menzhenshoufeiChart1 = echarts.init(document.getElementById("menzhenshoufeiChart1"),'macarons');
        this.$http({
            url: "menzhenshoufei/group/yaopinmingcheng",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].yaopinmingcheng);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].yaopinmingcheng
                    })
                }
                var option = {};
                option = {
                        title: {
                            text: '药品占比',
                            left: 'center'
                        },
                        tooltip: {
                          trigger: 'item',
                          formatter: '{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['25%', '55%'],
                                center: ['50%', '60%'],
                                data: pArray,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                };
                // 使用刚指定的配置项和数据显示图表。
                menzhenshoufeiChart1.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    menzhenshoufeiChart1.resize();
                };
            }
        });
      })
    },

    menzhenshoufeiChat2() {
      this.$nextTick(()=>{
        // xingming xingming
        //  nianling

        var menzhenshoufeiChart2 = echarts.init(document.getElementById("menzhenshoufeiChart2"),'macarons');
        this.$http({
            url: `menzhenshoufei/value/xingming/nianling`,
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].xingming);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].xingming
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '患者年龄',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'line',
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                menzhenshoufeiChart2.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    menzhenshoufeiChart2.resize();
                };
            }
        });
      })
    },

    menzhenshoufeiChat3() {
      this.$nextTick(()=>{
        //  zongjine
        // shoufeiriqi shoufeiriqi

        var menzhenshoufeiChart3 = echarts.init(document.getElementById("menzhenshoufeiChart3"),'macarons');
        this.$http({
            url: `menzhenshoufei/value/shoufeiriqi/zongjine/日`,
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].shoufeiriqi);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].shoufeiriqi
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '治疗费用',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                menzhenshoufeiChart3.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    menzhenshoufeiChart3.resize();
                };
            }
        });
      })
    },


    menzhenshoufeiChat4() {
      this.$nextTick(()=>{

        var menzhenshoufeiChart4 = echarts.init(document.getElementById("menzhenshoufeiChart4"),'macarons');
        this.$http({
            url: "menzhenshoufei/group/xingbie",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].xingbie);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].xingbie
                    })
                }
                var option = {};
                option = {
                        title: {
                            text: '性别比例',
                            left: 'center'
                        },
                        tooltip: {
                          trigger: 'item',
                          formatter: '{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['25%', '55%'],
                                roseType: 'area',
                                center: ['50%', '60%'],
                                data: pArray,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                };
                // 使用刚指定的配置项和数据显示图表。
                menzhenshoufeiChart4.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    menzhenshoufeiChart4.resize();
                };
            }
        });
      })
    },

    menzhenshoufeiChat5() {
      this.$nextTick(()=>{
        // yaopinmingcheng yaopinmingcheng
        //  yaopinfeiyong

        var menzhenshoufeiChart5 = echarts.init(document.getElementById("menzhenshoufeiChart5"),'macarons');
        this.$http({
            url: `menzhenshoufei/value/yaopinmingcheng/yaopinfeiyong`,
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
                let res = data.data;
                let xAxis = [];
                let yAxis = [];
                let pArray = []
                for(let i=0;i<res.length;i++){
                    xAxis.push(res[i].yaopinmingcheng);
                    yAxis.push(parseFloat((res[i].total)));
                    pArray.push({
                        value: parseFloat((res[i].total)),
                        name: res[i].yaopinmingcheng
                    })
                }
                var option = {};
                option = {
                    title: {
                        text: '药品费用',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: xAxis
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                menzhenshoufeiChart5.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    menzhenshoufeiChart5.resize();
                };
            }
        });
      })
    },

  }
};
</script>
<style lang="scss" scoped>
    .cardView {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .cards {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 10px;
            justify-content: center;
            .card {
                width: calc(25% - 20px);
                margin: 0 10px;
                /deep/.el-card__body{
                    padding: 0;
                }
            }
        }
    }
</style>
